jQuery(document).ready(function () {
    var style = 'easeOutElastic';
    var default_left = Math.round(jQuery('#menu li.first').offset().left - jQuery('#menu').offset().left);
    var default_width = jQuery('#menu li.selected').width();
    jQuery('#box').css({left: default_left});
    jQuery('#box .head').css({width: default_width});
    jQuery('#menu li').hover(function () {
        left = Math.round(jQuery(this).offset().left - jQuery('#menu').offset().left);
        width = jQuery(this).width(); 
        jQuery('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});   
        jQuery('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});    
    }).click(function () {
        jQuery('#menu li').removeClass('selected');    
        jQuery(this).addClass('selected');
    });    
    jQuery('#menu').mouseleave(function () {
        default_left = Math.round(jQuery('#menu li.selected').offset().left - jQuery('#menu').offset().left);
        default_width = jQuery('#menu li.selected').width();
        jQuery('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});   
        jQuery('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});        
    });  
});